<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评价与反馈</title>
    <link rel="stylesheet" href="../CSS/service.css">
    <link rel="stylesheet" href="../CSS/style.css">
    <link rel="stylesheet" href="../js/service.js">
</head>
<body>
    <div class="header w">
        <div class="logo">
            <img src="../images/logo.png" width="120px" height="80px" alt="">
        </div>
        <div class="search">
            <input type="text" placeholder="请输入图书名字">
            <button><img src="../images/btn.png" alt=""></button>
        </div>
        <div class="nav">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="./login.html">登录/注册</a></li>            
                <li><a href="./settlement.html">购物车</a></li>
                <li><a href="./shop.html">商城</a></li>
                <li><a href="./contact.html">联系客服</a></li>
                <li><a href="./service.html">售后</a></li>
            </ul>
        </div>
        <div style="height: 90px;"></div>
    <div class="feedback-form">
        <h2>用户反馈</h2>
        <form id="feedbackForm" onsubmit="submitFeedback(event)">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required>
            <label for="rating">评分 (1-5):</label>
            <input type="number" id="rating" name="rating" min="1" max="5" required>
            <label for="feedback">反馈:</label>
            <textarea id="feedback" name="feedback" rows="4" required></textarea>
            <input type="submit" value="提交">
        </form>
    </div>
    <div style="height: 60px;"></div>
    <div class="new-feedback">
        <h3>商品评价</h3>
        <div class="feedback-input">
            <label for="productName">输入商品名称:</label>
            <input type="text" id="productName" placeholder="请输入商品名称">
        </div>
        <div class="feedback-input">
            <div class="rating">
                <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
            </div>
        </div>
        <div class="feedback-input">
            <label for="newFeedback">对商品的评价:</label>
            <textarea id="newFeedback" rows="4" required></textarea>
        </div>
        <button onclick="submitNewFeedback()">提交</button>
    </div>
    <div class="tool">
        <a href="./settlement.html" class="on tool-item1">购物车</a>
        <a href="./contact.html" class="tool-item2">联系<br>客服</a>
        <a href="./person.html" class="tool-item3">个人<br>资料</a>
        <a id="goTop" class="tool-item4" onclick="goTop()"><span class="top-arrow"></span>顶部</a>
        <a href="./service.html" class="tool-item5">反馈</a>
        <a href="../index.html" class="tool-item5">首页</a>
    </div>
      <script>
        var selectedRating = 0; 

       document.querySelectorAll('.rating > span').forEach((star, index) => {
      star.addEventListener('mouseover', function() {
        highlightStars(index); 
       });
       star.addEventListener('click', function() {
        selectedRating = index + 1; 
        });
      });

      function highlightStars(index) {
     document.querySelectorAll('.rating > span').forEach((star, i) => {
        if (i <= index) {
            star.innerHTML = '★'; 
        } else {
            star.innerHTML = '☆'; 
        }
       });
     }

         function resetStars() {
        document.querySelectorAll('.rating > span').forEach((star, index) => {
        star.innerHTML = '☆'; 
        });
    }

function submitNewFeedback() {
    if (selectedRating === 0) {
        alert('请先选择评分！'); 
    } else {
        var productName = document.getElementById('productName').value;
        var newFeedback = document.getElementById('newFeedback').value;
        alert('您对 ' + productName + ' 的评价：' + newFeedback + '，星级评分：' + selectedRating);
    }
}
function submitFeedback(event) {
            event.preventDefault(); 
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var rating = document.getElementById('rating').value;
            var feedback = document.getElementById('feedback').value;

            alert('用户：' + name + '，邮箱：' + email + '，评分：' + rating + '，反馈：' + feedback);
        }
    </script>
</body>
</html>